<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%
		String path = request.getContextPath();
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	%>
<base href="<%=basePath%>">

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Clover</title>

<link href="res/css/bootstrap.min.css" rel="stylesheet">
<link href="res/css/messenger.css" rel="stylesheet">
<link href="res/css/messenger-theme-block.css" rel="stylesheet">
<style>
html {
	height: 100%;
}

body {
	height: 100%;
	padding-bottom: 30px;
	background: url(img/background.gif) repeat 0 0;
}

/***********************footer****************************/
footer {
	border-top: solid 3px #FB9000;
	padding-top: 20px;
	margin: 40px 0;
}

footer hr {
	margin: 10px 0;
}

footer a {
	color: #777;
	text-decoration: none;
	padding: 0 2px;
}

footer a:hover {
	color: #FB9000;
	text-decoration: none;
}

footer a:link {
	text-decoration: none;
}

footer a:visited {
	color: #777;
}

footer .copyright {
	color: #AAA;
}
/***********************footer****************************/
.container {
	height: 100% !important;
}

.page {
	height: calc(100% -164px);
	height: -moz-calc(100% -164px);
	height: -webkit-calc(100% - 164px);
}

.content {
	width: 300px;
	margin: auto;
	position: absolute;
	top: 50px;
	right: 0px;
	left: 0px;
	text-align: center;
}

.content h1 {
	color: #FB9000;
	font-weight: bolder;
	margin-bottom: 30px;
}

.navs-slider {
	margin: 20px 0;
}

.navs-slider a {
	padding: 5px 10px;
	font-size: 18px;
	font-family: 'Helvetica Neue', Helvetica, 'PingFang SC',
		'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
	text-decoration: none;
	color: #888;
}

.navs-slider a:hover {
	color: #666;
}

.navs-slider .active {
	color: #FB9000;
}

.navs-slider .active:hover {
	color: #FB9000;
}

.navs-slider-bar {
	width: 3.3em;
	margin-top: 0.5em;
	margin-left: 97px;
	height: 2px;
	background-color: #FB9000;
	transition: 0.2s;
	display: block;
}

.user-data-form {
	width: 100%;
}

.user-data-form input {
	height: 47px;
	width: 100%;
	border: solid 1px #D0D0D0;
	outline: none;
	padding: 5px;
}

.user-info input {
	border-bottom: 0;
}

.user-data-form .captcha {
	border: solid 1px #D0D0D0;
	height: 47px;
	width: 100%;
}

.user-data-form .captcha input {
	border: 0;
	width: 70%;
	display: block;
	float: left;
	height: 45px;
}

.user-data-form .captcha img {
	width: 30%;
	height: 45px;
	display: block;
	border: 0;
	border-left: solid 1px #EEE;
	float: left;
}

.user-data-form input[type='submit'] {
	background-color: #FB9000;
	border-radius: 3px;
	margin: 15px 0;
	font-size: 18px;
	border: 0;
	font-family: 'Helvetica Neue', Helvetica, 'PingFang SC',
		'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
	color: #EEE;
}

.user-data-form input[type='submit']:hover {
	background-color: #FDAC3F;
}

.user-data-form .othre input {
	height: 12px;
	width: 12px;
}

.user-data-form .othre div {
	float: left;
	display: block;
}

.user-data-form .othre a {
	float: right;
	text-decoration: none;
	color: #333;
}

@media screen and (max-height: 700px) {
	.content {
		top: 25px;
		margin-top: 0px;
	}
}

@media screen and (max-height: 650px) {
	.container {
		height: 650px !important;
	}
}
</style>
</head>
<body>
	<div class="container">
		<div class="page">
			<div class="content">
				<h1>CLOVER</h1>
				<h4>这边要添加一句什么话呢！</h4>
				<div class="navs-slider" data-active-index="1">
					<a href="#signup" class="active">注册</a> <a href="#signin" class="">登录</a>
					<span class="navs-slider-bar"></span>
				</div>

				<form id="signup" class="user-data-form">
					<div class="user-info">
						<input type="text" name="username" placeholder="账户名"> <input
							type="password" name="password" placeholder="密码（不少于6位）">
						<input type="text" name="phonenum" placeholder="手机号（仅支持中国大陆）">
						<input type="text" name="email" placeholder="Email（用于找回密码）">
					</div>
					<div class="captcha">
						<input type="text" name="captcha" placeholder="验证码"> <img
							src="res/img/captcha.jpg"
							onclick="this.src='res/img/captcha.jpg?'+Math.random()">
					</div>
					<input type="submit" value="加入Clover">
				</form>

				<form id="signin" class="user-data-form" style="display: none;">
					<div class="user-info">
						<input type="text" name="username" placeholder="账户名"> <input
							type="password" name="password" placeholder="密码">
					</div>
					<div class="captcha">
						<input type="text" name="captcha" placeholder="验证码"> <img
							src="res/img/captcha.jpg"
							onclick="this.src='res/img/captcha.jpg?'+Math.random()">
					</div>
					<input type="submit" value="登陆">
					<div class="othre">
						<div>
							<input type="checkbox" name="remember_me" checked value="true">
							记住我
						</div>
						<a href="">无法登陆？</a>
					</div>
				</form>

			</div>
		</div>

		<footer>
			<div class="link-group">
				<a href="http://www.jmu.edu.cn/">集美大学</a> <a
					href="http://xtw.jmu.edu.cn/">集美大学校团委</a> <a
					href="http://cec.jmu.edu.cn/">集美大学计算机工程学院</a>
			</div>
			<hr>
			<span class="copyright">© 2016 Clover 版权所有</span>
		</footer>
	</div>



	<script src="res/js/jquery.min.js"></script>
	<script src="res/js/bootstrap.min.js"></script>
	<script src="res/js/messenger.min.js"></script>
	<script src="res/js/jquery.md5.min.js"></script>
	<script type="text/javascript">
        $(document).ready(function(){
        	
        	
        	$._messengerDefaults = {
                extraClasses: 'messenger-fixed messenger-theme-block messenger-on-bottom messenger-on-right'
            }
            var signuppage = $("#signup");
            var signinpage = $("#signin");
            var signuptag = $(".navs-slider a[href='#signup']");
            var signintag = $(".navs-slider a[href='#signin']");
            var slider = $(".navs-slider-bar");
            signuptag.click(function(){
                signinpage.css({
                   'display':'none' 
                });
                signuppage.css({
                   'display':'' 
                });
                signuptag.addClass('active');
                signintag.removeClass('active');
                slider.css({
                    'margin-left' : '97px'
                });
                return false;
            });
            signintag.click(function(){
                signuppage.css({
                   'display':'none' 
                });
                signinpage.css({
                   'display':'' 
                });
                signintag.addClass('active');
                signuptag.removeClass('active');
                
                slider.css({
                    'margin-left':'157px'
                });
                return false;
            });
			if(location.hash == "#signin"){
				signintag.click();
        	}
            
            $("#signup input[type='submit']").click(function(){
            	var form = $(this).parent();
            	var password = form.find("input[name='password']");
            	password.val($.md5(password.val()));
            	$.ajax({
            		type:'POST',
            		url:'common/signup.do',
          			data:form.serialize(),
            		success:function(data){
                    	if(data.state){
                    		location.href = "home.page"
                    	}else{
                    		$.globalMessenger().post({
                                'message':"注册失败  " + data.data,
                                'hideAfter': '1.5',
                                'hideOnNavigate': 'true'
                            });
                    		$("#signup input[type='password']").val("");
                    	}    	
                    	
            		}
            	});
            	
            	return false;
            });
            
            $("#signin input[type='submit']").click(function(){
            	var form = $(this).parent();
            	var password = form.find("input[name='password']");
            	password.val($.md5(password.val()));
            	$.ajax({
            		type:'POST',
            		url:'common/signin.do',
          			data:form.serialize(),
            		success:function(data){
                    	if(data.state){
                    		location.href = "home.page"
                    	}else{
                    		$.globalMessenger().post({
                                'message':"登陆失败  " + data.data,
                                'hideAfter': '1.5',
                                'hideOnNavigate': 'true'
                            });
                    		$("#signin input[type='password']").val("");
                    	}    	
            		}
            	});
            	
            	return false;
            });
            
        });
    </script>
</body>

</html>